<template>
	<div class="wrapper" v-loading="loading" element-loading-text="加载中" element-loading-background="rgba(0, 0, 0, 0.8)">
		<div class="statistical-items" v-for="(item, index) in list" :key="item.id" @click="getDataList(index)">
			<div class="name">{{ item.name }}</div>
			<div class="num">{{ item.num }}</div>
		</div>

		<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body v-dialogDrag>
			<div style="height: 70vh; overflow-y: auto">
				<el-table :data="tableList" border v-if="title != '缺件零件'" key="1">
					<el-table-column label="序号" align="center" type="index" width="55" />
					<el-table-column label="返修单号" prop="repairNumber" min-width="150" show-overflow-tooltip/>
					<el-table-column label="返修产品" prop="productModel" min-width="150" show-overflow-tooltip/>
					<el-table-column label="产品编号" prop="productNumber" min-width="150" show-overflow-tooltip/>
				</el-table>
        <el-table :data="tableList" border v-else key="2">
					<el-table-column label="序号" align="center" type="index" width="55" />
					<el-table-column label="型号" prop="productModel" min-width="130" show-overflow-tooltip/>
					<el-table-column label="任务单号" prop="repairNumber" min-width="130" show-overflow-tooltip/>
					<el-table-column label="3B号" prop="productionBatch" min-width="150" show-overflow-tooltip/>
          <el-table-column label="图号" prop="partFigure" min-width="150" show-overflow-tooltip/>
          <el-table-column label="名称" prop="partName" min-width="150" show-overflow-tooltip/>
          <el-table-column label="数量" prop="partQuantity" min-width="80" show-overflow-tooltip/>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {partlist,partNum, onlineProducts, fileNotIssued, unpacked, unshipped, undelivered, militaryInspection } from "@/api/home.js"

export default {
	data() {
		return {

			title: "",
			tableList: [],
			open: false,
			loading: false,
			list: [
				{ id: 100, name: "在线产品", num: 0, dataList: [] },
				{ id: 101, name: "未下发文件", num: 0, dataList: [] },
				{ id: 102, name: "未下料", num: 0, dataList: [] },
        { id: 106, name: "缺件零件", num: 0, dataList: [] },
				{ id: 103, name: "超期未交付", num: 0, dataList: [] },
        { id: 105, name: "军检待提交", num: 0, dataList: [] },
				{ id: 104, name: "包装未发货", num: 0, dataList: [] },
			]
		}
	},
	created() {
		this.getData()
	},
	methods: {
		getDataList(index) {
			this.open = true
			switch (index) {
				case 0:
					this.title = "在线产品"
					break
				case 1:
					this.title = "未下发文件"
					break
				case 2:
					this.title = "未下料"
					break
				case 3:
					this.title = "缺件零件"
					break
				case 4:
					this.title = "超期未交付"
					break
				case 5:
					this.title = "军检待提交"
          case 6:
				  this.title = "包装未发货"
					break

			}
			this.tableList = this.list[index].dataList
		},
		async getData() {
			try {
				this.loading = true
        // 在线产品
				let res1 = await onlineProducts()
				this.list[0].num = res1.data.length
				this.list[0].dataList = res1.data
        // 未下发文件
				let res2 = await fileNotIssued()
				this.list[1].num = res2.data.length
				this.list[1].dataList = res2.data
        // 未下料
				let res3 = await unpacked()
				this.list[2].num = res3.data.length
				this.list[2].dataList = res3.data
        // 超期未交付
				let res4 = await undelivered()
				this.list[4].num = res4.data.length
				this.list[4].dataList = res4.data
        // 包装未发货
				let res5 = await unshipped()
				this.list[6].num = res5.data.length
				this.list[6].dataList = res5.data
        // 军检待提交
				let res6 = await militaryInspection()
				this.list[5].num = res6.data.length
				this.list[5].dataList = res6.data
        // 缺件零件
        let res7 = await partNum()
				this.list[3].num = res7.data
        let res8 = await partlist()
				this.list[3].dataList = res8.rows
				this.loading = false
			} catch (error) {
				this.loading = false
				console.error(error)
				this.$modal.msgError("获取产品数据统计错误", error)
			}
		}
	}
}
</script>

<style scoped>
.wrapper {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	/* justify-content: space-evenly; */
	flex-wrap: wrap;
	overflow: hidden;
}

.wrapper .statistical-items {
	flex: 0 1 25%;
	height: 4.75rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	flex-shrink: 0;
}

.wrapper .statistical-items .name {
	position: absolute;
	top: 50%;
	left: 36%;
	transform: translate(-50%, -50%);
	font-size: 1.125rem;
	color: #009999;
}

.wrapper .statistical-items .num {
	position: absolute;
	top: 50%;
	left: 60%;
	transform: translateY(-50%);
	font-family: Microsoft YaHei;
	font-size: 1.5rem;
	color: #319f9b;
}

.statistical-items:nth-child(1) {
	background: url("../../../assets/images/home01.png") no-repeat;
	background-size: contain;
}
.statistical-items:nth-child(2) {
	background: url("../../../assets/images/home02.png") no-repeat;
	background-size: contain;
}
.statistical-items:nth-child(3) {
	background: url("../../../assets/images/home03.png") no-repeat;
	background-size: contain;
}
.statistical-items:nth-child(4) {
	background: url("../../../assets/images/home04.png") no-repeat;
	background-size: contain;
}
.statistical-items:nth-child(5) {
	background: url("../../../assets/images/home05.png") no-repeat;
	background-size: contain;
}
.statistical-items:nth-child(6) {
	background: url("../../../assets/images/home13.png") no-repeat;
	background-size: contain;
}

.statistical-items:nth-child(7) {
	background: url("../../../assets/images/home13.png") no-repeat;
	background-size: contain;
}
</style>
